<template>
  <a-modal :title="title" :visible="visible" :maskClosable="false" :width="480" :footer="null" @cancel="cancelModal">
    <a-form :form="form" class="form-main">
      <div class="content">
        <div class="content-item">
          <a-form-item class="base-info-item-title base-info-item-first" label="授权策略">
            <a-select
              v-decorator="[
                'strategy',
                {
                  initialValue: record && record.strategy ? record.strategy : '',
                  rules: [{ required: true, message: '授权策略不能为空' }]
                }
              ]"
              placeholder="请选择"
              style="width: 120px;"
            >
              <a-select-option key="status-ONLINE" value="ALLOW">
                允许
              </a-select-option>
              <a-select-option key="status-OFFLINE" value="REFUSE">
                拒绝
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item class="base-info-item-title" label="协议类型">
            <a-select
              v-decorator="[
                'protocol',
                {
                  initialValue: record && record.protocol ? record.protocol : '',
                  rules: [{ required: true, message: '协议类型不能为空' }]
                }
              ]"
              placeholder="请选择"
              style="width: 120px;"
            >
              <a-select-option key="status-TCP" value="TCP">
                自定义TCP
              </a-select-option>
            </a-select>
          </a-form-item>
        </div>
        <div class="content-item">
          <a-form-item class="base-info-item-title base-info-item-first" label="端口范围">
            <div class="base-info-item-port">
              <a-input
                v-decorator="[
                  'portStart',
                  {
                    initialValue: record && record.portStart !== undefined ? record.portStart : '',
                    rules: [
                      { validator: handlePortStart },
                      {
                        required: true,
                        message: '起始端口不能为空'
                      }
                    ],
                    validateTrigger: ['change', 'blur']
                  }
                ]"
                style="width: 50px;"
              />
              <div class="base-info-item-port-idot">:</div>
              <a-form-item class="base-info-item-port-inneritem" label="">
                <a-input
                  v-decorator="[
                    'portEnd',
                    {
                      initialValue: record && record.portEnd !== undefined ? record.portEnd : '',
                      rules: [
                        { validator: handlePortEnd },
                        {
                          required: true,
                          message: '结束端口不能为空'
                        }
                      ],
                      validateTrigger: ['change', 'blur']
                    }
                  ]"
                  style="width: 50px;"
                />
              </a-form-item>
            </div>
          </a-form-item>
          <a-form-item class="base-info-item-title" label="授权对象">
            <a-input
              v-decorator="[
                'authObject',
                {
                  initialValue: record && record.authObject !== undefined ? record.authObject : '',
                  rules: [
                    { validator: handleAuthObject },
                    {
                      required: true,
                      message: '授权对象不能为空'
                    }
                  ],
                  validateTrigger: ['change', 'blur']
                }
              ]"
              style="width: 120px;"
            />
          </a-form-item>
        </div>
      </div>
      <div class="footer">
        <a-button type="primary" class="footer-button-cancle" @click.stop.prevent="cancelModal">
          取消
        </a-button>
        <a-button
          type="primary"
          class="footer-button-sure"
          :style="{ margin: '0 30px' }"
          @click.stop.prevent="confirm()"
        >
          {{ operationBtn }}
        </a-button>
      </div>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'SecurityModify',
  components: {},
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    record: {
      type: Object || null,
      default: () => null
    }
  },
  data() {
    return {
      form: this.$form.createForm(this)
    }
  },
  computed: {
    title() {
      let result = ''
      if (this.record) {
        result = '编辑安全规则'
      } else {
        result = '设置新的安全规则'
      }
      return result
    },
    operationBtn() {
      let result = ''
      if (this.record) {
        result = '确认添加'
      } else {
        result = '确认设置'
      }
      return result
    }
  },
  methods: {
    cancelModal() {
      this.resetForm()
      this.$emit('update:visible', false)
    },
    // 重置表单
    resetForm() {
      const {
        form: { resetFields }
      } = this
      this.$nextTick(() => {
        resetFields()
      })
    },
    // 规则校验
    handlePortStart(rule, value, callback) {
      const regex = /^\+?[1-9][0-9]*$/
      if (!regex.test(value)) {
        callback(new Error('请输入正整数'))
      }
      if (!(Number(value) >= 1024 && Number(value) <= 65535)) {
        callback(new Error('端口范围1024~65535'))
      }
      callback()
    },
    handlePortEnd(rule, value, callback) {
      const portStart = this.form.getFieldValue('portStart')
      const regex = /^\+?[1-9][0-9]*$/
      if (!regex.test(value)) {
        callback(new Error('请输入正整数'))
      }
      if (!(Number(value) >= 1024 && Number(value) <= 65535)) {
        callback(new Error('端口范围1024~65535'))
      }
      if (Number(value) && Number(portStart) && Number(portStart) >= Number(value)) {
        callback(new Error('结束端口大于起始端口'))
      }
      callback()
    },
    handleAuthObject(rule, value, callback) {
      const regex = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\/(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/
      if (!regex.test(value)) {
        callback(new Error('请输入 ip/子网掩码'))
      }
      callback()
    }
  }
}
</script>

<style scoped lang="less">
.form-main {
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  .content {
    padding: 0 30px;
    margin-top: 24px;
    font-size: 14px;
    .content-item {
      margin-bottom: 12px;
      /deep/.ant-form-item-label {
        width: 70px;
        text-align: left;
      }
      display: flex;
      justify-content: flex-start;
      .base-info-item-title {
        width: 194px;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 0px;
      }
      .base-info-item-first {
        margin-right: 32px;
      }
      .base-info-item-port {
        width: 120px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .base-info-item-port-inneritem {
          display: flex;
          justify-content: flex-start;
          margin-bottom: 0px;
        }
      }
    }
  }
  /deep/.ant-form-explain {
    max-width: 120px;
  }
}
</style>
